<template>
  <div class="container">
    <ul>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/telTag.png"/>
        <input type="tel" name="account" placeholder="请输入手机号码" v-model="tel">
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/codeTag.png"/>
        <input type="text" name="yan" placeholder="请输入验证码" v-model="yan">
        <div v-if="!reciprocal" @click="getYan">获取验证码</div>
        <div v-else>{{time}}s</div>
      </li>
      <!-- <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/passwordTag.png"/>
        <input type="password" name="password" placeholder="请输入密码" v-model="password">
      </li> -->
      <div class="details">
        <div class="login" @click="register">绑定</div>
        <!-- <div class="goLogin"><navigator url="/pages/login/main" open-type="redirect">已有账号,立即登陆</navigator></div> -->
      </div>
    </ul>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      reciprocal:false,
      tel:"",
      yan:"",
      password:"",
      time:"60",
      timeInterval:""
    }
  },

  components: {
  },

  methods: {
    ...mapActions(['_reqUserInfo']),
    async getYan(){
      let params = {phone:this.tel};
      let res=await this.$api.postSendVerificationCode(params);
      if(res.data.level == "success"){
        this.$currency.showToast(res.data.message,'none',3000)
        this.reciprocal = true;
        let second = 60;
        this.timeInterval=setInterval(()=>{
          second--;
          this.time = second;
          if(this.time == 0){
            this.reciprocal = false;
            this.time = 60;
            this.$currency.showToast('请重新发送验证信息','none',3000)
            clearInterval(this.timeInterval)
          }
        },1000)
      }else{
        this.$currency.showToast(res.data.message,'none',3000)
      }
    },
    async register(){
      var userToken=wx.getStorageSync('userToken')
      let params = {phone:this.tel,verify_phone:this.yan,user_token:userToken}
      let res=await this.$api.postBindingPhone(params);
      if(res.data.level=="success"){
        this.$currency.showToast(res.data.message,'none',2000)
        this._reqUserInfo();
        this.$currency.switchTab('/pages/homeMain/home/main')
      }else{
        this.$currency.showToast(res.data.message,'none',3000)
      }
    }
  },
  onUnload(){
    clearInterval(this.timeInterval)
  }
}
</script>

<style scoped>
.container{color: #666666;background-color: #F8F8FB}
ul li{width: 100%;height: 52px;display: flex;justify-content: row;border-bottom:1px solid #F8F8FB;margin-bottom: 1px;background-color: #fff;}
ul li img{width: 26px;height: 26px;margin-top: 12px;margin-left: 20px;}
ul li div{width: 120px;height: 40px;margin-top: 6px;color: #666;border: 1px solid rgba(0,0,0,0.2);font-size: 15px;line-height: 40px;text-align: center;border-radius: 5px;font-weight: 600;}
ul li:nth-of-type(2) input{width: 200px;}
ul li input{width: 250px;height: 26px;margin-top: 12px;margin-left: 20px;}
ul li:nth-of-type(4){margin-bottom: 0px;}
.tip{width: 100%;height: 52px;}
.tip input{margin-left: 20px;}
.tip span{line-height: 52px;}
.tip span:nth-of-type(2){float: right;margin-right: 20px;}
.login{width: 340px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);margin-left: 17.5px;height: 50px;line-height: 50px;color: #fff;border-radius: 5px;font-size: 20px;text-align: center;}
.goLogin{width: 140px;height: 40px;margin: 10px auto;text-align: center;line-height: 40px;color: #0180cf;font-size: 15px;}
.details{padding-top: 10px;background-color: #fff;}
</style>
